import { useLazyQuery } from '@apollo/client';
import { Stack, Typography } from '@mui/material';

import { LoginForm } from './components/LoginForm';
import { ProductsTable } from './components/ProductsTable';
import { GET_PRODUCTS } from './graphql';
import { Product } from './types';

export const App = () => {
  const [getProducts, { data }] = useLazyQuery<{ products: Product[] }>(
    GET_PRODUCTS
  );

  return (
    <Stack spacing={2} p={2} height='100vh' className='ag-theme-alpine'>
      <Typography variant='h5'>Каталог продуктов</Typography>
      <LoginForm fetchProducts={() => getProducts()} />
      <ProductsTable data={data?.products ?? []} />
    </Stack>
  );
};
